<template>
  <div>
    <Dialog
      :model-value="showDialog"
      title="设置表头"
      :width="500"
      @confirm="onSubmit"
      @close="onClose"
    >
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="dialogRules"
        label-width="80px"
      >
        <el-form-item label="值" prop="label">
          <el-input v-model="dialogForm.label" />
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>
<script setup>
// Dialog部分
const showDialog = ref(false);
const dialogFormRef = ref();
const itemIndex = ref("");
const dialogForm = ref({
  label: "",
});
const dialogRules = ref({
  label: [{ required: true, message: "请选输入值", trigger: "change" }],
});

const onSubmit = () => {
  if (form.value.selectList.length === 0) {
    form.value.selectList.push(JSON.parse(JSON.stringify(dialogForm.value)));
  } else {
    if (
      form.value.selectList.find((item) => {
        if (item.label == dialogForm.value.label) {
          return true;
        }
      })
    ) {
      ElMessage.warning("值重复请重新填写");
      return;
    }
    if (itemIndex.value) {
      form.value.selectList.splice(
        itemIndex.value,
        1,
        JSON.parse(JSON.stringify(dialogForm.value))
      );
    } else {
      form.value.selectList.push(JSON.parse(JSON.stringify(dialogForm.value)));
    }
  }

  onClose();
};
const onClose = () => {
  showDialog.value = false;
  itemIndex.value = "";
  dialogFormRef.value.resetFields();
};
</script>
<style lang="scss" scoped></style>
